<template>
  <view class="formPage">
    <view class="step">
      <uni-steps
        active-color="#ffffff"
        :options="[{ title: '提交信息' }, { title: '提交材料' }]"
        :active="1"
      ></uni-steps>
    </view>
    <view class="uploadDom">
      <view class="title">请上传疾病确诊材料</view>
      <view class="photoList">
        <view class="showImage">
          <span v-for="(item, index) in imageItem" :key="index"
            ><img :src="item.objectName" mode="widthFix" /><view class="delete" @click="deleteBtn(index)"
              ><img :src="closeIcon" /></view
          ></span>
          <span v-if="imageItem.length < 10" class="uploadBtn" @click="uploadImage">
            <b>+</b>
          </span>
        </view>
      </view>
    </view>
    <view class="uni-btn-v">
      <button form-type="submit" @click="uploadSubmit">提交材料</button>
    </view>
  </view>
</template>

<script>
import { sendPublicGold } from '@/api/join.js';
import { baseURL } from '@/common/baseUrl.js';
import { getToken } from '@/utils/auth';
export default {
  data() {
    return {
      closeIcon:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/close.png',
      testIcon: 'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/weixin-static/insurance/ysgc.jpg',
      illFormData: this.$store.getters.storeIllFormData,
      imageItem: [],
      imageItemName: [],
      test: 'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/images/1a7f0723490440dc97784f02f75ef497.jpg'
    };
  },
  methods: {
    uploadImage() {
      const self = this;
      if (this.imageItem.length >= 10) {
        uni.showToast({ title: '最多可以上传10张材料', icon: 'none' });
      }
      wx.chooseImage({
        count: 1, // 最多可以选择的图片总数
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          let tempFilePaths = res.tempFilePaths;
          // 启动上传等待中...
          wx.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true,
            duration: 10000
          });

          wx.uploadFile({
            url: `${baseURL}/oss/uploadImages`,
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              'Content-Type': 'multipart/form-data',
              Authorization: `Bearer ${getToken()}`
            },
            success: function (res) {
              wx.hideToast();
              res = JSON.parse(res.data);
              if (res.code === 0) {
                self.imageItem.push({ objectName: res.data.url });
                self.imageItemName.push({ objectName: res.data.objectName });
              } else {
                uni.showToast({ title: res.message, icon: 'none' });
              }
              // 服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
            },
            fail: function (res) {
              wx.hideToast();
              wx.showModal({
                title: '错误提示',
                content: '上传图片失败',
                showCancel: false,
                success: function (res) {}
              });
            }
          });
        }
      });
    },
    deleteBtn(val) {
      this.imageItem.splice(val, 1);
      this.imageItemName.splice(val, 1);
    },
    uploadSubmit() {
      if (this.imageItem.length < 1) {
        uni.showToast({ title: '请上传疾病材料', icon: 'none' });
        return;
      }
      this.illFormData.pics = this.imageItemName;
      sendPublicGold(this.illFormData).then((res) => {
        if (res.code === 0) {
          wx.showModal({
            title: '提交成功',
            content: '提交成功',
            showCancel: false,
            success: (res) => {
              this.$wxPromise.navigateTo({
                url: '/pages/getWelfareGold/speedResult'
              });
            }
          });
        } else {
          uni.showToast({ title: res.message, icon: 'none' });
        }
      });
    }
  }
};
</script>
<style>
page {
  background-color: #f4f4f4;
}
.uni-btn-v button {
  border: none !important;
}
button:after {
  border: none !important;
}
</style>
<style lang="scss">
.formPage {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .step {
    padding: 50rpx 80rpx;
    background: #f96a6a;
  }
  .uploadDom {
    background: #fff;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 24rpx;
    .title {
      font-size: 36rpx;
      padding: 20rpx;
    }
    .photoList {
      span {
        width: 180rpx;
        height: 180rpx;
        border-radius: 24rpx;
      }
      .showImage {
        text-align: left;
        span {
          display: inline-block;
          width: 194rpx;
          height: 194rpx;
          position: relative;
          border: 1px dotted #ddd;
          margin: 10rpx;
          overflow: hidden;
          img {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            -webkit-transform: translate3d(-50%, -50%, 0);
          }
          .delete {
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            width: 40rpx;
            height: 40rpx;
            background-color: #fff;
          }
        }
        .uploadBtn {
          b {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            -webkit-transform: translate3d(-50%, -50%, 0);
          }
        }
        .clear {
          clear: both;
        }
      }
      // .uploadBtn {

      //   font-weight: 500;
      //   font-size: 44rpx;
      //   border: 1px dotted #ddd;
      //   width: 180rpx;
      //   height: 180rpx;
      //   text-align: center;
      //   line-height: 180rpx;
      //   border-radius: 24rpx;
      //   margin: 6rpx;
      // }
      .clear {
        clear: both;
      }
    }
  }
}
.uni-btn-v {
  margin: 60rpx 30rpx;
  button {
    width: 642rpx;
    height: 88rpx;
    border: 2rpx solid rgba(0, 0, 0, 0);
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    opacity: 1;
    border-radius: 44rpx;
    color: #fff;
    font-size: 36rpx;
  }
}
</style>
